<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>定位 : fixed</title>
        <style type="text/css">
            body { margin: 0 ; padding: 0 ; }
            .wrapper { height: 300px ; }
            .odd { background-color: #dedede ; }
            .even { background-color: #fffe8f; }

            
            .tool-bar {
                /* 相对于 浏览器窗口 进行定位 */
                position: fixed ; /* 位置固定 */
                left: 50% ;
                top: 50% ;
                height: 400px ;
                width: 600px ;
                margin-top: -200px ; /* 顶部外边距取元素高度的一半 向上移动用负值 */
                margin-left: -300px ; /* 左侧外边距取元素宽度的一半 向左移动用负值 */
                background-color: rgba(238, 16, 0, 0.51);
            }

        </style>
    </head>
    <body>

        <div class="wrapper odd"></div>
        <div class="wrapper even"></div>
        <div class="wrapper odd"></div>
        <div class="wrapper even"></div>
        <div class="wrapper odd"></div>
        <div class="wrapper even"></div>
        <div class="wrapper odd"></div>
        <div class="wrapper even"></div>
        <div class="wrapper odd"></div>
        <div class="wrapper even"></div>
        <div class="wrapper odd"></div>
        <div class="wrapper even"></div>

        <div class="tool-bar">
            对比 fixed 和 absolute 两种定位方式的区别:
            <p> <a href="fixed3.html">fixed3.html</a>  </p>
            <p> <a href="absolute6.html">absolute6.html</a>  </p>
        </div>

    </body>
</html>